<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="评价状态">
					<el-select class="w-80" v-model="queryParams.status" placeholder="请选择" clearable filterable>
						<el-option label="全部" value="" />
						<el-option label="未评价" :value="0" />
						<el-option label="已评价" :value="1" />
					</el-select>
				</el-form-item>
				<el-form-item label="发布人">
					<el-input class="w-[280px]" v-model="queryParams.u_real_name" clearable />
				</el-form-item>
				<el-form-item label="评价对象">
					<el-input class="w-[280px]" v-model="queryParams.ce_real_name" clearable />
				</el-form-item>
				<el-form-item label="合作编号">
					<el-input class="w-[280px]" v-model="queryParams.sn" clearable />
				</el-form-item>
				<el-form-item label="发布时间">
					<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
				</el-form-item>
                <el-form-item label="显示状态">
					<el-select class="w-80" v-model="queryParams.is_show" placeholder="请选择" clearable filterable>
						<el-option label="全部" value="" />
						<el-option label="显示" :value="1" />
						<el-option label="隐藏" :value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none" shadow="never">
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" :index="indexAdd" min-width="100" />
				<el-table-column label="评价id" prop="sn" min-width="120" />
                <el-table-column label="评价内容" prop="content" min-width="160" />
                <el-table-column label="评价图片" prop="images" min-width="160">
                    <template #default="{ row }">
                        <el-avatar style="flex-shrink: 0;"v-if="row.images.length != 0" :src="row.images[0]" :size="58" />
                        <el-avatar style="flex-shrink: 0;" v-if="row.images[1]" :src="row.images[1]" :size="58" />
                        <div v-if="row.images.length > 1" style="line-height: 58px;padding-left: 10px;">...</div>
                    </template>
                </el-table-column>
                <el-table-column label="合作评价" prop="star_level" min-width="120">
                    <template #default="{ row }">
                        <span v-if="row.star_level == 0"> — </span>
                        <span v-else>{{ row.star_level }}星</span>
                    </template>
                </el-table-column>
                <el-table-column label="评价对象" prop="ce_real_name" min-width="160" />
                <el-table-column label="合作编号" prop="c_sn" min-width="180" />
                <el-table-column label="评价人" prop="u_real_name" min-width="120" />
                <el-table-column label="评价时间" prop="evaluate_time" min-width="180" />
                <el-table-column label="自动评价" prop="is_auto" min-width="120">
                    <template #default="{ row }">
                        <span>{{ row.is_auto == 0 ? '否':'是' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="评价状态" prop="status" min-width="120">
                    <template #default="{ row }">
                        <span>{{ row.status == 0 ? '未评价':'已评价' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="显示状态" prop="is_show" min-width="120">
                    <template #default="{ row }">
                        <span v-if="row.is_show == 0" style="color: #F56C6C;">隐藏</span>
                        <span v-else>显示</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="is_show" min-width="120" fixed="right">
                    <template #default="{ row }">
                        <div v-if="row.status == 1">
                            <el-button v-if="row.is_show == 0" v-perms="['cooperation.cooperation/userEvaluationShow']" type="primary" link @click="handleShow(row.id)">显示</el-button>
                            <el-button v-if="row.is_show == 1" v-perms="['/cooperation.cooperation/userEvaluationShow']" type="danger" link @click="handleHide(row.id)">隐藏</el-button>
                        </div>
                        <span v-else></span>
                    </template>
                </el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="cooperationLists">
    import { userEvaluationLists, userEvaluationShow } from '@/api/cooperate/evaluate';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';

	const queryParams = reactive({
		status: '',
		u_real_name: '',
		ce_real_name: '',
		sn: '',
		start_time: '',
		end_time: '',
        is_show: ''
	})
    const lists:any = ref([])

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: userEvaluationLists,
		params: queryParams
	})

    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }

    const handleShow = async (id: any) => {
        await feedback.confirm('显示之后，移动端用户及发布人可看到该评价，是否确认显示？', '显示')
        await userEvaluationShow({ id, is_show: 1})
        getLists()
    }

    const handleHide =  async (id: any) => {
        await feedback.confirm('隐藏之后，移动端用户及发布人不能看到该评价，是否确认隐藏？', '隐藏')
        await userEvaluationShow({ id, is_show: 0})
        getLists()
    }

	// onActivated(() => {
	// 	getLists()
	// })

	getLists()
</script>